<template>
    <el-row>
        <el-col :span="24">
            <el-row :gutter="20" v-if="userInfos&&userInfos.length>0">
                <el-col :span="4" v-for="userInfo in userInfos" :key="userInfo.id">
                    <div class="card">
                        <simple-user-info :user="userInfo"></simple-user-info>
                        <a v-if="!attentionUser(userInfo.id)" class="attention" @click="attention(userInfo.id)">关注</a>
                        <a v-else class="removeAttention" @click="removeAttention(userInfo.id)">取消关注</a>
                    </div>
                </el-col>
            </el-row>
            <div class="none" v-else>
                <div v-if="fans">没有任何粉丝关注</div>
                <div v-else>没有任何关注人</div>
            </div>
            <el-row>
                <el-col :span="18" :offset="3">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageInfo.page"
                        :page-sizes="pageInfo.sizes"
                        :page-size="pageInfo.size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageInfo.total">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    import SimpleUserInfo from '@/components/user/SimpleUserInfo'

    export default {
        name: 'users',
        components: {
            SimpleUserInfo
        },
        data () {
            return {
                id: '',
                pageInfo: {
                    page: 1,
                    size: 20,
                    total: 0,
                    sizes: [20, 50, 100, 200, 300, 400]
                },
                userInfos: []
            }
        },
        props: {
            fans: {
                type: Boolean,
                required: false,
                default: false
            },
            self: {
                type: Boolean,
                required: false,
                default: false
            }
        },
        watch: {
            $route (to, from) {
                if (this.getUser) {
                    this.action(this.currentAttentionUsersAction())
                }
                this.parseURL()
                this.obtainUsers()
            }
        },
        mounted () {
            if (this.getUser) {
                this.action(this.currentAttentionUsersAction())
            }
            this.parseURL()
            this.obtainUsers()
        },
        computed: {
            ...mapGetters({
                getUser: 'user/getUser',
                attentionUser: 'user/attentionUser'
            })
        },
        methods: {
            ...mapActions({
                attentionUserAction: 'user/attentionUser',
                removeAttentionUserAction: 'user/removeAttentionUser',
                currentAttentionUsersAction: 'user/currentAttentionUsers',
                pageAttentionUsersAction: 'user/pageAttentionUsers',
                pageFansAction: 'user/pageFans'
            }),
            parseURL () {
                let paths = this.$route.path.split('/')
                if (paths.length === 3) {
                    this.id = this.getUser.userId
                } else if (paths.length === 4) {
                    this.id = paths[3]
                }
            },
            handleSizeChange (val) {
                this.pageInfo.size = val
                this.obtainUsers()
            },
            handleCurrentChange (val) {
                this.pageInfo.page = val
                this.obtainUsers()
            },
            filling (data) {
                if (data.data) {
                    this.userInfos = data.data.records
                    this.pageInfo.total = data.data.total
                }
            },
            obtainUsers () {
                let queryInfo = {
                    userId: this.id,
                    page: this.pageInfo.page,
                    size: this.pageInfo.size
                }
                if (this.fans) {
                    this.action(this.pageFansAction(queryInfo), data => this.filling(data))
                } else {
                    this.action(this.pageAttentionUsersAction(queryInfo), data => this.filling(data))
                }
            },
            attention (id) {
                this.action(this.attentionUserAction(id), data => {
                    this.$message.success('关注成功')
                    this.action(this.currentAttentionUsersAction())
                    if (!this.fans) {
                        if (self) {
                            this.obtainUsers()
                        }
                    }
                })
            },
            removeAttention (id) {
                this.action(this.removeAttentionUserAction(id), data => {
                    this.$message.success('取消关注成功')
                    this.action(this.currentAttentionUsersAction())
                    if (!this.fans) {
                        if (self) {
                            this.obtainUsers()
                        }
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .none {
        height: 300px;
        line-height: 300px;
    }

    .card {
        margin: 8px 0;

        .attention {
            color: rgba(255, 103, 51, 0.8);
        }

        .removeAttention {
            color: rgba(102, 69, 255, 0.8);
        }

        a {
            line-height: 48px;
            text-decoration: none;
            cursor: pointer;
        }

        a:link {
            color: #216278;
        }

        a:visited {
            color: #216278;
        }

        a:hover {
            color: rgba(255, 151, 60, 0.8);
        }

        a:active {
            color: rgba(255, 86, 25, 0.8);
        }
    }
</style>
